<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <link href="assets/img/favicon.png" rel="icon" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2231269_rbcjlpvcr1.css">
    <title>Pano Whiteboard</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #333;
        font-size: 14px;
      }
      body {
        background: #f5f5f5;
      }
      #whiteboardWrapper {
        display: none;
        background: #fff;
        width: 100%;
        height: 100%;
      }
      #toolbar {
        height: 30px;
      }
      .join-form,
      .pano-control-panel {
        padding: 30px;
        border: 1px solid #fff;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
      }
      .join-form label {
        display: flex;
        justify-content: flex-start;
        margin: 6px;
      }
      .join-form label span {
        display: inline-block;
        width: 100px;
      }
      .join-form label input {
        width: 180px;
        border-radius: 3px;
        border: 1px solid #dfdfdf;
        outline: none;
        padding-left: 8px;
        height: 22px;
      }

      .join-form .join-btn,
      .pano-control-panel .join-btn {
        margin-top: 20px;
        padding: 7px 40px;
        outline: none;
        cursor: pointer;
        border-radius: 5px;
        background: #1eb1d3;
        color: #fff;
        font-size: 16px;
      }
      .join-form h2 {
        margin-bottom: 20px;
      }

      .pano-control-panel {
        display: none;
      }
      #note{
        border:1px solid #aaa;
        border-radius: 5px;
        padding:5px;
        width:420px;
        margin-top:15px;
        color:#aaa;
      }
    </style>
  </head>
  <body>
    <div class="join-form" id="joinForm">
      <h2>Pano Whiteboard</h2>
      <label>
        <span>App ID: </span>
        <input id="appId" name="appId" type="text" value="" />
      </label>

      <label>
        <span>Channel ID: </span>
        <input name="channelId" type="text" value=""
      /></label>

      <label>
        <span>Pano Token: </span>
        <input name="panoToken" type="text" value=""
      /></label>

      <label>
        <span>User ID: </span>
        <input name="userId" type="number" id="userId" value="" />
      </label>

      <label>
        <span>User Name: </span>
        <input name="name" type="text" value="" id="userName" />
      </label>

      <button class="join-btn" id="joinBtn">Join</button>

      <div id="note">
        Please refer to <a href="https://developer.pano.video/getting-started/terms/" target="developer">Glossary</a> to understand the meaning of App ID, Channel ID, Token, User ID, and User Name.
        <br>请参考 <a href="https://developer.pano.video/getting-started/terms/" target="developer">名词解释</a> 了解 App ID、Channel ID、Token、User ID、User Name 的含义。

        <br><br>You can use <a href="https://developer.pano.video/getting-started/firstapp/#14-%E7%94%9F%E6%88%90%E4%B8%B4%E6%97%B6token" target="developer">temporary token</a> for temporary testing.
        <br>可以使用 <a href="https://developer.pano.video/getting-started/firstapp/#14-%E7%94%9F%E6%88%90%E4%B8%B4%E6%97%B6token" target="developer">临时token</a> 来进行临时测试。
      </div>
    </div>

    <div class="pano-control-panel" id="panoControlPanel">
      <h2>Channel join success!</h2>
      <button class="join-btn" id="openWhiteboardBtn">open whiteboard</button>
    </div>
    <div id="whiteboardWrapper"></div>
    <script src="./index.js"></script>
  </body>
</html>
